<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="css/animation.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/fontello-ie7.css">
    <![endif]-->
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/calendarui/calendar.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/headeroom/headeroom.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            var _calenda = new Calendar('calendar', new Date());
            _calenda.showUI(function (date) {
                layer.alert('你点击了' + date.format("yyyy-MM-dd") + '日', {
                    skin: 'layui-layer-lan',
                    shift: 5 //动画类型
                });
            });
            var header = new Headroom(document.querySelector("#header"), {
                tolerance: 5,
                offset: 0,
                classes: {
                    initial: "hui-header",
                    pinned: "hui-header-show",
                    unpinned: "hui-header-hide"
                }
            });
            header.init();
        });
    </script>
</head>
<body>
<div class="hui-header hui-header-show" id="header">
    <div class="hui-product">
        <div class="hui-top-logo_long hui-c">
            <span class="hui-l hui-s-logo"></span>
            <span class="hui-blod hui-l" style="color: #E78899;padding-right: 5px;">Three</span>
            <span class="hui-l" style="color: #5FBFE7;">Fish</span>
        </div>
        <div class="hui-g-search">
            <form accept-charset="utf-8" method="post">
                <input type="text" placeholder="搜索站内文章、内容"/><span><i class="hui-icon">&#xe829;</i></span>
            </form>
        </div>
        <div class="hui-top-menu">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </div>
    <div class="hui-nav hui-nav-large">
        <ul class="hui-nav-box">
            <li class="hui-nav-bar active"><a href="#">首页</a></li>
            <li class="hui-nav-bar"><a href="#">连接</a></li>
            <li class="hui-nav-bar"><a href="#">连接</a></li>
            <li class="hui-nav-bar"><a href="#">连接<i class="hui-icon">&#xe80b;</i></a>
                <div class="hui-nav-menu">
                    <a href="#">连接1连接1连接1</a>
                    <a href="#">连接2</a>
                </div>
            </li>
            <li class="hui-nav-bar"><a href="#">连接</a></li>
        </ul>
    </div>
</div>
<div class="hui-content  hui-c">
    <div class="hui-content-left  hui-c">
        <div class="hui-content-box hui-btm">
            <div class="hui-content-box hui-btm">
                <div class="hui-content-box--title">
                    <b></b>
                    <h4>推荐信息</h4>
                </div>
                <ul>
                    <li class="hui-l hui--50"><a href="#">Scss position的正确用法</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">Sublime Text 3中文优化版【前端开发神器】</a><span
                            class="hui-content-box--time">2015/05/17</span></li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="hui-content-box hui-btm">
            <div class="hui-content-box hui-btm">
                <div class="hui-content-box--title">
                    <b></b>
                    <h4>热门阅读</h4>
                </div>
                <ul>
                    <li class="hui-l hui--50"><a href="#">Scss position的正确用法</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">Sublime Text 3中文优化版【前端开发神器】</a><span
                            class="hui-content-box--time">2015/05/17</span></li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                    <li class="hui-l hui--50"><a href="#">通过预加载器提升网页加载速度</a><span class="hui-content-box--time">2015/05/17</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="hui-content-box">
            <div class="hui-content-box--title">
                <b></b>
                <h4>最新文章</h4>
            </div>
            <div class="hui-list-viewBoxBox">
                <div class="hui-list-box hui-c">
                    <div class="hui-l" style="width: 15%;">
                        <a href="details.html" class="hui-big-tag">111html/CSS</a>
                    </div>
                    <div class="hui-l" style="width: 85%;">
                        <div class="hui-block hui-list hui-title-box">
                            <a href="details.html" class="hui-list hui-tag">html/CSS</a>
                            <a href="details.html" class="hui-list hui-title"><h3>css position的正确用法</h3></a>
                        </div>
                        <p>

                            介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:
                            基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定...
                        </p>
                        <div class="hui-list-box-footer hui-font-14">
                            <span><i class="hui-icon">&#xe80e;</i><a href="#">admin</a></span>
                            <span><i class="hui-icon">&#xe81e;</i>阅读(200)</span>
                            <span><i class="hui-icon">&#xe81d;</i>2015-05-05</span>
                            <span><i class="hui-icon">&#xe806;</i>评论(6)</span>
                        </div>
                    </div>
                </div>
                <div class="hui-list-box hui-c">
                    <div class="hui-l" style="width: 15%;">
                        <a href="#" class="hui-big-tag" style="background: #7E73B3;">111html/CSS</a>
                    </div>
                    <div class="hui-l" style="width: 85%;">
                        <div class="hui-block hui-list hui-title-box">
                            <a href="#" class="hui-list hui-tag">html/CSS</a>
                            <a href="#" class="hui-list hui-title"><h3>css position的正确用法</h3></a>
                        </div>
                        <p>
                            介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:
                            基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定...
                        </p>
                        <div class="hui-list-box-footer hui-font-14">
                            <span><i class="hui-icon">&#xe80e;</i><a href="#">admin</a></span>
                            <span><i class="hui-icon">&#xe81e;</i>阅读(200)</span>
                            <span><i class="hui-icon">&#xe81d;</i>2015-05-05</span>
                            <span><i class="hui-icon">&#xe806;</i>评论(6)</span>
                        </div>
                    </div>
                </div>
                <div class="hui-list-box hui-c">
                    <div class="hui-l" style="width: 15%;">
                        <a href="#" class="hui-big-tag" style="background: #844599;">111html/CSS</a>
                    </div>
                    <div class="hui-l" style="width: 85%;">
                        <div class="hui-block hui-list hui-title-box">
                            <a href="#" class="hui-list hui-tag">html/CSS</a>
                            <a href="#" class="hui-list hui-title">
                                <h3>css position的正确用法</h3></a>
                        </div>
                        <p>
                            介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:
                            基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定...
                        </p>
                        <div class="hui-list-box-footer hui-font-14">
                            <span><i class="hui-icon">&#xe80e;</i><a href="#">admin</a></span>
                            <span><i class="hui-icon">&#xe81e;</i>阅读(200)</span>
                            <span><i class="hui-icon">&#xe81d;</i>2015-05-05</span>
                            <span><i class="hui-icon">&#xe806;</i>评论(6)</span>
                        </div>
                    </div>
                </div>
                <div class="hui-list-box hui-c">
                    <div class="hui-l" style="width: 15%;">
                        <a href="#" class="hui-big-tag" style="background: #3493C5;">111html/CSS</a>
                    </div>
                    <div class="hui-l" style="width: 85%;">
                        <div class="hui-block hui-list hui-title-box">
                            <a href="#" class="hui-list hui-tag">html/CSS</a>
                            <a href="#" class="hui-list hui-title">
                                <h3>css position的正确用法</h3>
                            </a>
                        </div>
                        <p>
                            介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:
                            基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定...
                        </p>
                        <div class="hui-list-box-footer hui-font-14">
                            <span><i class="hui-icon">&#xe80e;</i><a href="#">admin</a></span>
                            <span><i class="hui-icon">&#xe81e;</i>阅读(200)</span>
                            <span><i class="hui-icon">&#xe81d;</i>2015-05-05</span>
                            <span><i class="hui-icon">&#xe806;</i>评论(6)</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--
        作者：moli11552@yeah.net
        时间：2015-08-26
        描述：右边开始
    -->
    <div class="hui-content-right  hui-c">
        <div class="hui-content-box hui-btm">
            <div class="hui-user">
                <div class="hui-user-line"></div>
                <img src="img/user.jpg" class="huc-user-icon"/>
                <div class="hui-user-info">
                    <span class="hui-user-title">Huc</span>
                    <span>软件工程师</span>
                    <span><i class="hui-icon hui-font-20">&#xe826;</i><a target="_blank"
                                                                         href="https://github.com/threefish?tab=repositories">GitHub</a></span>
                </div>
                <a class="hui-about-me">关于我</a>
                <div class="hui-user-email">
                    <a target="_blank"
                       href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=xPf08v3x8ff09oS1teqnq6k"
                       style="text-decoration:none;">
                        <img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"/>
                    </a>
                </div>
            </div>
        </div>
        <div class="hui-content-box hui-btm">
            <div id="calendar" style="width: 270px;height:280px;"></div>
        </div>
        <div class="hui-content-box hui-btm">
            <div class="hui-content-box--title">
                <h4>分类目录</h4>
                <a href="#">More</a>
            </div>
            <ul>
                <li><a href="#">Scss position的正确用法</a></li>
                <li><a href="#">Sublime Text 3中文优化版【前端开发神器】</a></li>
                <li><a href="#">通过预加载器提升网页加载速度</a></li>
            </ul>
        </div>
        <div class="hui-content-box hui-btm">
            <div class="hui-content-box--title">
                <h4>标签云</h4>
            </div>
            <div class="hui-tags hui-c">
                <a href="#" title="javascript">javascript</a>
                <a href="#" title="Html/CSS">Html/CSS</a>
                <a href="#" title="java">java</a>
                <a href="#" title="服务器服务器服务器服务器">服务器服务器服务器服务器</a>
                <a href="#" title="linux">linux</a>
                <a href="#" title="配置">配置</a>
                <a href="#" title="服务器服务器服务器服务器">服务器服务器服务器服务器</a>
                <a href="#" title="linux">linux</a>
                <a href="#" title="配置">配置</a>
                <a href="#" title="服务器服务器服务器服务器">服务器服务器服务器服务器</a>
                <a href="#" title="linux">linux</a>
                <a href="#" title="配置">配置</a>
            </div>
        </div>
        <div class="hui-content-box hui-btm">
            <!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=86 src="http://music.163.com/outchain/player?type=2&id=30953009&auto=1&height=66"></iframe>-->
        </div>
    </div>
</div>
<div class="hui-fix-menu" onclick="scrollTo(0,0)"><i class="hui-icon">&#xe821;</i></div>
<div class="hui-footer">
    <div class="hui-copyright">
        (c) Copyright 2015 Huc. All Rights Reserved.
    </div>
</div>
</body>

</html>